<template>
  <div>
    <div class="router">
      <div
        :class="'childrouter '+ [routerInfo.checked === index?'checked':'']"
        v-for="(item,index) in routerInfo.list"
        :key="item.label"
        v-show="checkHidden(item)"
        @click="routerLink(index,item.path)"
      >
        <a-icon class="tab-icon" :type="item.icon" />
        {{item.label}}信息
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
// 服务商详情
export default {
  data() {
    return {
      routerInfo: {
        checked: 0,
        list: [
          {
            label: '主体',
            path: 'index',
            icon: 'inbox'
          },
          {
            label: '用户',
            path: 'user',
            icon: 'user'
          },
          {
            label: '团队',
            path: 'team',
            icon: 'usergroup-add'
          },
          {
            label: '团队-代理商',
            path: 'teamAgentDetail',
            icon: 'usergroup-add',
            isHidden: 'hide'
          },
          {
            label: '团队-服务商',
            path: 'teamProviderDetail',
            icon: 'usergroup-add',
            isHidden: 'hide'
          },
          {
            label: '团队-商户',
            path: 'teamMerchantDetail',
            icon: 'usergroup-add',
            isHidden: 'hide'
          },
          {
            label: '团队-会员',
            path: 'teamMemberDetail',
            icon: 'usergroup-add',
            isHidden: 'hide'
          },
          {
            label: '账户',
            path: 'account',
            icon: 'wallet'
          },
          {
            label: '收益',
            path: 'profit',
            icon: 'red-envelope'
          },
          {
            label: '加盟费',
            path: 'fee',
            icon: 'pay-circle'
          },
          {
            label: '保证金',
            path: 'bond',
            icon: 'insurance'
          },
          {
            label: '结算',
            path: 'settlement',
            icon: 'calculator'
          },
          // {
          //   label: '操作',
          //   path: 'operation',
          //   icon: 'tool'
          // },
          {
            label: '消息',
            path: 'message',
            icon: 'message'
          }
        ]
      }
    }
  },
  beforeMount() {
    let path = this.$route.path.split('/menu/provider/list/details/')[1]
    if (path) {
      this.routerInfo.list.map((item, index) => {
        if (item.path === path) {
          this.routerInfo.checked = index
        }
      })
    }
  },
  methods: {
    checkHidden (item) {
      if (item.isHidden && item.isHidden === 'hide') {
        return false
      } else {
        return true
      }
    },
    routerLink(index, path) {
      if (this.routerInfo.checked !== index) {
        this.routerInfo.checked = index
      }
      this.$router.push({
        path: `/menu/provider/list/details/${path}`,
        query: { id: this.$route.query.id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.router {
  display: flex;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #e8e8e8;
  align-items: center;
  justify-content: space-between;
  .checked {
    color: #1890ff;
    border-bottom: 2px solid #1890ff;
  }
  .childrouter {
    width: 10%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
  }
  .tab-icon {
    margin-right: 8px;
  }
}
</style>